<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div style="background: #888">
<canvas id="canvas" ></canvas>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            const trangram = [
                {p: [{x: 0, y: 0}, {x: 800, y: 0}, {x: 400, y: 400}], color: '#caff67'},
                {p: [{x: 0, y: 0}, {x: 400, y: 400}, {x: 0, y: 800}], color: '#67bef'},
                {p: [{x: 800, y: 0}, {x: 800, y: 400}, {x: 600, y: 600}, {x: 600, y: 200}], color: '#ef3d61'},
                {p: [{x: 600, y: 200}, {x: 600, y: 600}, {x: 400, y: 400}], color: '#f9f5la'},
                {p: [{x: 400, y: 400}, {x: 600, y: 600}, {x: 400, y: 800}, {x: 200, y: 600}], color: '#a594c0'},
                {p: [{x: 200, y: 600}, {x: 400, y: 800}, {x: 0, y: 800}], color: '#fa8ecc'},
                {p: [{x: 800, y: 400}, {x: 800, y: 800}, {x: 400, y: 800}], color: '#f6ca29'}
            ]
            var canvas = document.getElementById("canvas");
            canvas.width = 800;
            canvas.height = 800;
            var context = canvas.getContext("2d");
            for (var i = 0; i < trangram.length; i++) {
                draw(trangram[i], context);
            }
            function draw (piece, cxt) {
                cxt.beginPath();
                cxt.moveTo(piece.p[0].x, piece.p[0].y);
                cxt.fillStyle = piece.color;
                for (var i = 1; i < piece.p.length; i++) {
                    cxt.lineTo(piece.p[i].x, piece.p[i].y);
                }
                cxt.closePath();
                cxt.fill();
            }
        })
    </script>
</div>
</body>

</html>

